<template>
<el-dialog
  :title="title"
  :visible="visible"
   width="430px" append-to-body
  @close="close" :close-on-click-modal="false">
  <el-form :model="form" :rules="rules" ref="form" :inline="false" label-width="85px">
    <el-form-item label="会议名称" prop="meetingCode">
        <el-select
            style="width:280px"
            @change="change"
            v-model="form.meetingCode"
            filterable 
            placeholder="请选择会议名称">
            <el-option
            v-for="item in list"
            :key="item.value"
            :label="item.meetingName"
            :value="item.meetingCode">
            </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="会议密码" prop="password" v-if="showPassword">
         <el-input type="primary" v-model="form.password"   placeholder="请输入会议密码" 
         style="width:280px"></el-input>
    </el-form-item>
    <!-- <el-form-item label="userId" prop="userId">
         <el-input type="primary" v-model="form.userId"   placeholder="请输入userId"
         style="width:280px"></el-input>
    </el-form-item> -->
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
  </span>
</el-dialog>
</template>
<script>

export default {
  props: {

  },
  data() {
    return {
      content: '',
      visible: false,
      title: '加入会议',
      loading: false,
      isEdit: false,
      list: [],
      form: {
        meetingCode: '',
        // userId: '',
        password: ''
      },
      openPasswordFlag: 0,
      rules: {
        meetingCode: [
          { required: true, message: '请选择会议名称', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入会议密码', trigger: 'blur' }
        ],
        userId: [
          { required: true, message: '请输入userId', trigger: 'blur' }
        ]

      }
    };
  },
  computed: {
    showPassword() {
      return this.openPasswordFlag === 1;
    }
  },
  methods: {
    getDataList() {
      const params = {
        url: `/api/ems/meeting/list`,
        type: 'post',
        params: {
          real: 1
        }
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          if (rows.length) {
            this.list = rows;
          }
        }
      });
    },
    change(val) {
      const o = this.list.find(v => v.meetingCode === val);
      this.openPasswordFlag = o ? o.openPasswordFlag : 0;
    },
    validForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      });
    },
    async submit() {
      await this.validForm(); // 表单校验
      console.log('chengg ');
      const meetingCode = this.form.meetingCode;
      // const userId = this.form.userId;&userId=${userId}
      const password = this.form.password;
      const params = {
        url: `/api/ems/meeting/join?meetingCode=${meetingCode}&password=${password}`,
        type: 'post',
        params: {}
      };
      this.$ajax(params).then(resp => {
        const { result, data } = resp;
        if (result) {
          this.$store.commit('gis/updateAddMeetingData', data);
          window.localStorage.setItem('addMeetingData', JSON.stringify(data));
          this.close();
          window.open('/meeting/index.html#/meeting');
          // window.open('/web/meeting/index.html#/meeting');
        }
      });
    },
    openDialog() {
      this.isEdit = false;
      this.visible = true;
      this.getDataList();
    },
    close() {
      this.visible = false;
      for (const key in this.form) {
        this.form[key] = '';
      }
      this.$refs.form.resetFields();
    }
  },
  created() {

  }
};
</script>

<style>

</style>